/**
 * Created by wangzilong on 2017/4/11.
 */
import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Image,
    ScrollView,
    TouchableOpacity,
    TextInput,
    ListView,
    Modal,
    Platform,
    Alert
} from 'react-native';
import ImageFetch from '../lib/plugins/ImageFetch';
import ImageWrapper from '../components/ImageWrapper';
import NavigationBar from '../components/NavigationBar';
import ButtonItem from '../components/ButtonItem';
import userService from '../lib/services/userService';
import ImageCropPicker from 'react-native-image-crop-picker';
var Dimensions = require('Dimensions');
const { width, height } = Dimensions.get('window');
export default class CreateClub extends Component{
    constructor(props) {
        super(props);
        this.state = {
            isJoin:false,
            headImg:{},
            token:this.props.navigation.state.params.token,
            imgData:{},
            advImgData:{},
            advImg:{},
            clubName:'',
            introduce:'',
            group_type:1,
            lat:0,
            lng:0,
            group_info:'',
            group_location:'选择地址',
            label:'未添加'

        }; 
    }

    render(){
        return (
            <View style={styles.container}>
                <NavigationBar 
                    leftIcon={'left'} 
                    titleText={'创建俱乐部'} 
                    leftPress={()=>this.goBack()}
                    rightText={'完成'}
                    rightTextPress={()=>this.createFinish()}
                    rightTextStyle={{color:'#fff',fontSize:16}}/>
                <ScrollView>
                    <View style={styles.titleBox}>
                        <TouchableOpacity onPress={()=>this.choseImg('head')}>
                            <ImageWrapper resizeMode={'cover'} icon={this.state.headImg.path?{uri:this.state.headImg.path}:'addImg'} width={100} height={100}/>
                        </TouchableOpacity>
                    </View>
                    <View style={[styles.lineItems,{marginTop:5,height:40}]}>
                        <View>
                            <ImageWrapper icon={'card'} style={styles.image}/>
                        </View>
                        <View style={{flex:1}}>
                            <TextInput 
                                style={styles.input} 
                                placeholderTextColor={'#999'} 
                                placeholder={'设置俱乐部名称'}
                                underlineColorAndroid={'transparent'}
                                onChangeText={(text)=>this.getClubName(text)}/>
                        </View>
                    </View>
                    <TouchableOpacity onPress={()=>this.goChoseAddress()}>
                        <View style={[styles.lineItems,{marginTop:5,height:40}]}>
                            <View>
                                <ImageWrapper icon={'address'} style={styles.image}/>
                            </View>
                            <View>
                                <Text>{this.state.group_location}</Text>
                            </View> 
                        </View>
                    </TouchableOpacity>
                    <View style={{marginTop:5,flexDirection:'row',backgroundColor:'#fff',padding:10}}>
                        <View>
                            <ImageWrapper icon={'discrib'} style={styles.image}/>
                        </View>
                        <View style={{flex:1}}>
                            <TextInput
                                style={styles.input} 
                                underlineColorAndroid={'transparent'}
                                placeholderTextColor={'#999'}
                                placeholder={'俱乐部介绍(不超过50个字)'}
                                maxLength={50}
                                multiline={true}
                                textAlignVertical={'top'}
                                numberOfLines={5}
                                onChangeText={(text)=>this.getIntroduce(text)}/>
                        </View>
                    </View>
                    <TouchableOpacity onPress={()=>this.goAddLabel()}>
                        <View style={[styles.lineItems,{marginTop:5,height:40}]}>
                            <View>
                                <ImageWrapper icon={'tag'} style={styles.image}/>
                            </View>
                            <View>
                                <Text>俱乐部标签：{this.state.label}</Text>
                            </View>
                        </View>
                    </TouchableOpacity>
                    <View style={{marginTop:5,paddingLeft:10,paddingRight:10,backgroundColor:'#fff'}}>
                        <View style={{flexDirection:'row',alignItems:'center',borderBottomWidth:1,borderBottomColor:'#ccc',height:40}}>
                            <ImageWrapper  icon={'club'} style={styles.image}/>
                            <Text>俱乐部封面</Text>
                        </View>
                        <View style={{flexDirection:'row',alignItems:'center'}}>
                            <TouchableOpacity onPress={()=>this.choseImg('adv')}>
                                <ImageWrapper width={100} height={100} icon={this.state.advImg.path?{uri:this.state.advImg.path}:'addImg'}/>
                            </TouchableOpacity>
                            <View style={{flex:1,marginLeft:10}}>
                                <TextInput 
                                    style={styles.input}
                                    underlineColorAndroid={'transparent'}
                                    placeholderTextColor={'#999'}
                                    placeholder={'添加文字说明'}
                                    multiline={true}
                                    textAlignVertical={'top'}
                                    numberOfLines={5}
                                    onChangeText={(text)=>this.getInfo(text)}/>
                            </View>
                        </View>
                    </View>
                    <ButtonItem 
                        textStyle={{fontSize:16,color:'#999'}} 
                        style={styles.bottomButton} 
                        title={'是否允许自由加入'} 
                        icon={this.state.isJoin?'openBtn':'closeBtn'}
                        onPress={()=>this.changeBtn()}/>
                </ScrollView>
            </View>
        )

    }
    goBack(){
        this.props.navigation.goBack();
    }

    createFinish(){
        var $this = this;
        if(!this.state.headImg){
            alert('请添加俱乐部头像！');
            return;
        }else if(!this.state.clubName){
            alert('请添加俱乐部名称！');
            return;
        }else if(this.state.group_location=='选择地址' || this.state.group_location==''){
            alert('请选择俱乐部地址！');
            return;
        }
        var obj = {};
        // obj.group_img=this.state.imgData.uri;
        obj.name=this.state.clubName;
        obj.introduce=this.state.introduce;
        obj.group_type = this.state.group_type;
        obj.lat=this.state.lat;
        obj.lng=this.state.lng;
        // obj.group_adv=this.state.imgData.uri;
        obj.group_info=this.state.group_info;
        obj.group_location=this.state.group_location;
        obj.label = this.state.label;
        var imgArr = [];
        imgArr['group_img'] = this.state.imgData.path;
        imgArr['group_adv'] = this.state.advImgData.path;
        // alert(JSON.stringify(this.state.imgData))
        ImageFetch('user/create-crowd?',obj,imgArr,$this.state.token)
            .then(res=>{
                if(res.code==10000){
                    // alert(JSON.stringify(res));
                    Alert.alert(
                        '提示信息',
                        '创建成功',
                        [{text: '确定', onPress: () => {this.props.navigation.state.params.backCreat();$this.goBack()}}])
                }
            })
    }

    changeBtn(){
        this.setState({
            isJoin:!this.state.isJoin,
            group_type:this.state.isJoin?1:2
        })
    }

    goAddLabel(){
        var $this = this;
        const {navigate} = this.props.navigation;
        navigate('AddLabel',{getTags:(data)=>{
            $this.setState({
                label:data.join(',')
            })
        }});
    }

    goChoseAddress(){
        var $this = this;
        const {navigate} = this.props.navigation;
        navigate('ChoseClubAddress',{getAddress:(data)=>{
            // alert(JSON.stringify(data))
            $this.setState({
                group_location:data.address,
                lat:data.lat,
                lng:data.lng
            })
        }});
    }

    choseImg(staturs){
        var $this = this;
        ImageCropPicker.openPicker({
                width: 300, 
                height: 300, 
                cropping: true,
                mediaType:'photo',
            }).then(image => { 
                var obj = {};
                if (Platform.OS === 'android') {
                    obj = {path: image.path, isStatic: true};
                } else {
                    obj = {path: image.path.replace('file://', ''), isStatic: true};
                }
                if(staturs=='head'){
                    $this.setState({
                        headImg : obj,
                        imgData : image,
                    });
                }else if(staturs=='adv'){
                    $this.setState({
                        advImg : obj,
                        advImgData : image,
                    });
                }
            }).catch((err)=>{
                console.log(err)
            })
    }
    getClubName(text){
        this.setState({
            clubName:text
        })
    }
    getIntroduce(text){
        this.setState({
            introduce:text
        })
    }
    getInfo(text){
        this.setState({
            group_info:text
        })
    }
}

const styles = StyleSheet.create({
    container:{
        flex:1,
        backgroundColor:'#EFEFF4',
        ...Platform.select({
            ios: {
                marginTop: 20
            },
            android: {
                marginTop:0
            },

        }),
    },
    titleBox:{
        justifyContent:'center',
        alignItems:'center',
        padding:10,
        backgroundColor:'#fff'
    },
    bottomButton:{
        height:40,
        justifyContent:'center',
        paddingLeft:10,
        paddingRight:10,
        backgroundColor:'#fff',
        marginTop:5,
        marginBottom:50,
    },
    lineItems:{
        flexDirection:'row',
        alignItems:'center',
        backgroundColor:'#fff',
        paddingLeft:10,
        paddingRight:10
    },
    image:{
        width:26,
        height:26,
        marginRight:10
    },
    input:{
        paddingLeft:0
    }
    
});